//文章页
import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';
import { ActivityIndicator } from 'antd-mobile'
import './Artlist.css'

class Artlist extends Component {

    constructor(props) {
        super(props);
        this.state = {
            noteList: [],
            artLike:[],
            judge:[],
            isShow: true
        }
    }
    componentWillMount(){
        let url = 'http://62.234.30.197:8088/article/idchalike';
        fetch(url, {
            method: 'POST',
            body: JSON.stringify({userid:localStorage.getItem("userid")}),
            headers: {
                "Access-Control-Allow-Origin":"*",
                'content-type': 'application/json'
        },
        mode: 'cors'
        })
        .then(res => res.json())
        .then(res => this.setState({
            artLike: res
        }))
        // .then(res => console.log(this.state.noteList))
        // .then(res => {
        //     for(let i = 0; i < this.state.noteList.length; i ++){
        //         this.setState({
        //             judge: [...this.state.judge, 0]
        //         })
        //     }
        // })
<<<<<<< HEAD
        //.catch(e=>console.log(e))
=======
        .catch(e=>console.log(e))
>>>>>>> 429ee6d905019f594144cf938b04d544385572a3
    }
    componentDidMount(){
        let url = 'http://154.8.202.56:8081/articlelist/cha';
        fetch(url, {
        method: 'POST',
        body: JSON.stringify({}),
        headers: {
            "Access-Control-Allow-Origin":"*",
            'content-type': 'application/json'
        },
        mode: 'cors'
        })
        .then(res => res.json())
        .then(res => this.setState({
            noteList: res
        }))
        // .then(res => console.log(this.state.noteList))
        // .then(res => {
        //     for(let i = 0; i < this.state.noteList.length; i ++){
        //         this.setState({
        //            judge: [...this.state.judge, 0]
        //         })
        //     }
        // })
        .then(res=>{
            for(let i = 0;i<this.state.noteList.length;i++){
                let a =0;
                for(let j = 0;j<this.state.artLike.length;j++){
                    if(this.state.artLike[j]['articleid']==this.state.noteList[i]['articleid']){
                        a = 1;
                        this.setState({judge: [...this.state.judge, 1]});
                        break;
                    }
                }
                if(a == 0){
                        this.setState({judge: [...this.state.judge, 0]});
                }
            }
        })
        .then(res => {
            this.setState({
                isShow: false
            })
        })
        .catch(e=>console.log(e))
    }
    
    render() {
        const likeCount = (topid, useid) => {
            let url = 'http://154.8.202.56:8081/articlelist/gai';
            fetch(url, {
                method: 'POST',
                body: JSON.stringify({
                    articleid: topid,
                    userid: useid
                }),
                headers: {
                    "Access-Control-Allow-Origin":"*",
                    'content-type': 'application/json'
                },
                mode: 'cors'
            })
        }
        return (
            <div className="list__body">
                <ActivityIndicator 
                    toast
                    text="加载中..."
                    animating={this.state.isShow}
                />
                <ul>
                    {
                        this.state.noteList.map((item, idx) => (
                            <NavLink key={idx} to={{pathname:'/Detail/:' + item.articleid, state: {item:item}}}>
                                <li className="node__item">
                                    <div className='article_txt'>
                                        <span>{item.title}</span>
                                        <p>{item.content}</p>
                                    </div>
                                    <img src={item.pic} alt="pic" οnerrοr=''/>
                                    <div className="i__div">
                                        <div className='art_time'><p>{item.deliverdate}</p></div>
                                        <div className='art_picc'>
                                            <i className={`iconfont ${this.state.judge[idx] == 0?"iconicon-xin":"iconicon-hongxin"}`}
                                                onClick={(e) => {
                                                    e.stopPropagation();
                                                    e.nativeEvent.stopImmediatePropagation();
                                                    e.preventDefault();
                                                
                                                    if(this.state.judge[idx] == 0 ) {
                                                        likeCount(item.articleid, localStorage.getItem("userid"));
                                                        item.thumb += 1;
                                                        let arr = this.state.judge;
                                                        arr[idx] = 1;
                                                        this.setState({
                                                            judge: arr
                                                        });
                                                    } 
                                                    // else{
                                                    // //     item.thumb -= 1;
                                                    // //     let arr = this.state.starclass
                                                    // //     arr[idx] = 0;
                                                    // //     this.setState({
                                                    // //         starclass: arr
                                                    // //     });
                                                    //}
                                                }}
                                            ></i>
                                            &nbsp;{item.thumb}&nbsp;&nbsp;
                                            <i className="iconfont iconicon-zhunfa"></i>
                                        </div>
                                    </div>                      
                                </li>
                            </NavLink>
                        ))
                    }
                </ul>
            </div>
        )
    }}

export default Artlist
